import Cluster from 'ol/source/Cluster'
import Vector from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import olStyle from 'ol/style/Style'
import olCircle from 'ol/style/Circle'
import olStroke from 'ol/style/Stroke'
import olFill from 'ol/style/Fill'
import olText from 'ol/style/Text'
import { toLonLat } from 'ol/proj'

// 创建10000个要素
var count = 1000;
// 创建要素坐标
var features = new Array(count);
var e = 4500000;
var x = 0;
var y = 0;
for (var i = 0; i < count; i++) {
    var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
    coordinates = toLonLat(coordinates, 'EPSG:4326');
    coordinates[1] = coordinates[1] * 0.00001;
    x = coordinates[0];
    y = coordinates[1];
    features[i] = new Feature(
        new Point(coordinates)
    );
}
// debugger;
//矢量要素数据源
var source = new Vector({
    features: features
});
//聚合标注数据源
var clusterSource = new Cluster({
    distance: 40, //聚合的距离参数，即当标注间距离小于此值时进行聚合，单位是像素
    source: source //聚合的数据源，即矢量要素数据源对象
});


//加载聚合标注的矢量图层
var styleCache = {}; //用于保存特定数量的聚合群的要素样式
var clusters = new VectorLayer({
    source: clusterSource,
    style: function(feature) {
        var size = feature.get('features').length; //获取该要素所在聚合群的要素数量
        var style = styleCache[size];
        var text = size.toString();
        if (!style) {
            if (size == 1) {
                text = '测试'
                style = [
                    new olStyle({
                        image: new olCircle({
                            radius: 10,
                            stroke: new olStroke({
                                color: '#fff'
                            }),
                            fill: new olFill({
                                color: '#9966FF'
                            })
                        }),
                        text: new olText({
                            text: text,
                            fill: new olFill({
                                color: '#fff'
                            })
                        })
                    })
                ];
            } else {
                style = [
                    new olStyle({
                        image: new olCircle({
                            radius: 10,
                            stroke: new olStroke({
                                color: '#fff'
                            }),
                            fill: new olFill({
                                color: '#3399CC'
                            })
                        }),
                        text: new olText({
                            text: text,
                            fill: new olFill({
                                color: '#fff'
                            })
                        })
                    })
                ];
            }

            styleCache[size] = style;
        }
        return style;
    }
});

//添加聚合标注
var addCluster = function(map) {
        //当前聚合标注数据源中的要素
        var currentFeatures = clusterSource.getSource().getFeatures();
        //如果聚合标注数据源中没有要素，则重新添加要素
        if (currentFeatures.length == 0) {
            clusterSource.getSource().addFeatures(features);
            clusters.setSource(clusterSource);
        }
        map.addLayer(clusters);
    }
    //移除聚合标注
var removeCluster = function(map) {
    clusterSource.getSource().clear(); //移除聚合标注数据源中的所有要素
    map.removeLayer(clusters); //移除标注图层
}

var clusterTag = {
    x: x,
    y: y,
    addCluster: addCluster,
    removeCluster: removeCluster
}

export default clusterTag